<style>
	.amap-wrapper {
		width: 900px;
		height: 600px;
	}
	
	.amap-demo {
		height: 100px;
	}
</style>
<template>
	<div>
		<Modal v-model="modalShow" :closable='false' :mask-closable=false fullscreen>
			<p slot="header">编辑车辆</p>
			<Row>
				<Col span="16">
				<Form ref="formData" :model="formData" label-position="left" :label-width="100">
					<FormItem label="车牌号" prop="car_sn">
						<Input v-model="formData.car_sn" disabled />
					</FormItem>

					<FormItem label="品牌类型" prop="dot_name">
						<Cascader v-model="brandSysType" :data="brandSysTypeData" disabled  change-on-select filterable></Cascader>
					</FormItem>

					<FormItem label="归属网点" prop="dot_id">
						<Select v-model="formData.dot_id"  filterable>
							<Option v-for="(item,key) in getSearchData.dot" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>
					
					<FormItem label="还车网点" prop="h_dot_id">
						<Select v-model="formData.h_dot_id" filterable multiple>
							<Option v-for="(item,key) in getSearchData.dot" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>
					
					<FormItem label="日租价格" prop="d_price">
						<Input v-model="formData.d_price" />
					</FormItem>

					<FormItem label="时租价格" prop="h_price">
						<Input v-model="formData.h_price" />
					</FormItem>

					<FormItem label="保证金">
						<!--<i-switch v-model="formData.is_tra" :true-value="1" :false-value="-1" />-->
						<Input v-model="formData.b_price" />
					</FormItem>

					<FormItem label="不计免赔价格">
						<Input v-model="formData.set_no_ded" />
					</FormItem>

					<FormItem label="是否配备驾驶员">
						<i-switch v-model="formData.is_dri" :true-value="1" :false-value="-1" @on-change="driChange"/>
					</FormItem>

					<FormItem label="包天价格" v-if="formData.is_dri == 1">
						<Input v-model="formData.dri_d_price" />
					</FormItem>

					<FormItem label="包时价格" v-if="formData.is_dri == 1">
						<Input v-model="formData.dri_h_price" />
					</FormItem>
                     
                   <div v-if="applyStatus == 2"> 
					<!--<FormItem label="车辆识别码">
						<Input v-model="formData.vin_sn" />
					</FormItem>

					<FormItem label="发动机号">
						<Input v-model="formData.engine_sn" />
					</FormItem>-->

					<FormItem label="车辆行驶证照片">
						<Button type="primary" @click="modal.carImgM2 = true"><span v-if="formData.drive_z_img">已上传</span><span v-else>请上传</span></Button>
						<Modal width="1000" height="1000" v-model="modal.carImgM2" title="车辆行驶证照片上传" @on-ok="modelCarOk2" @on-cancel="modelCarC2">
						    <FormItem label="行驶证正面" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.dImg.handleSuccess1" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="formData.drive_z_img == ''"></Icon>
									<img :src="formData.drive_z_img" v-if="formData.drive_z_img" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>	
							
							<FormItem label="行驶证反面" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.dImg.handleSuccess2" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="formData.drive_f_img == ''"></Icon>
									<img :src="formData.drive_f_img" v-if="formData.drive_f_img" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>	
						</Modal>
					</FormItem>

					<FormItem label="人车合照">
						<Button type="primary" @click="modal.carImgM3 = true"><span v-if="formData.car_img">已上传</span><span v-else>请上传</span></Button>
						<Modal width="1000" height="1000" v-model="modal.carImgM3" title="车辆行驶证照片上传" @on-ok="modelCarOk3" @on-cancel="modelCarC3">
							<FormItem label="人车合照" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.cImg.handleSuccess" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="formData.car_img == ''"></Icon>
									<img :src="formData.car_img" v-if="formData.car_img" width="100px" height="100px">
								</div>
								</Upload>
							</FormItem>	
						</Modal>
					</FormItem>
					</div> 
					
					<FormItem label="车辆类型(选填)" prop="car_class">
						<Select v-model="formData.car_class"  filterable>
							<Option v-for="(item,key) in getSearchData.car_class" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>

					<FormItem label="GPS设备号(选填)">
						<Input v-model="formData.gps_sn" />
					</FormItem>

					<FormItem label="加油油号(选填)" prop="car_oil">
						<Select v-model="formData.car_oil"  filterable>
							<Option v-for="(item,key) in getSearchData.car_oil" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>

					<FormItem label="汽车排量(选填)" prop="car_out">
						<Select v-model="formData.car_out"  filterable>
							<Option v-for="(item,key) in getSearchData.car_out" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>

					<FormItem label="变数箱(选填)" prop="car_gear">
						<Select v-model="formData.car_gear"  filterable>
							<Option v-for="(item,key) in getSearchData.car_gear" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>

					<FormItem label="限行设置(选填)" prop="limit_run">
						<Select v-model="formData.limit_run" filterable>
							<Option v-for="(item,key) in getSearchData.limit_run" :value="key" :key="key">{{ item }}</Option>
						</Select>
					</FormItem>

					<FormItem label="车辆照片(选填)" prop="dot_tel">
						<Button type="primary" @click="modal.carImgM1 = true"><span v-if="formData.car_img_list">已上传</span><span v-else>请上传</span></Button>
						<Modal width="1000" height="1000" v-model="modal.carImgM1" title="车辆照片上传" @on-ok="modelCarOk1" @on-cancel="modelCarC1">
							
							<FormItem label="车辆中控区域" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.carImgList.handleSuccess1" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="upload.carImgList.carImgList1 == ''"></Icon>
									<img :src="upload.carImgList.carImgList1" v-if="upload.carImgList.carImgList1" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>	
							
							<FormItem label="车辆正45°角" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.carImgList.handleSuccess2" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="upload.carImgList.carImgList2 == ''"></Icon>
									<img :src="upload.carImgList.carImgList2" v-if="upload.carImgList.carImgList2" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>
							
							<FormItem label="车辆后侧45°角" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.carImgList.handleSuccess3" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="upload.carImgList.carImgList3 == ''"></Icon>
									<img :src="upload.carImgList.carImgList3" v-if="upload.carImgList.carImgList3" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>
							
							<FormItem label="车辆前排座椅" prop="limit_run">
								<Upload 
								ref="upload"
								:data="{'path':'car'}"
								:show-upload-list="false"  
								:on-success="upload.carImgList.handleSuccess4" 
								:format="['jpg','jpeg','png']"  
								 type="drag" 
								:action="upload.url"  
								style="display: 
								inline-block;width:100px;">
								<div style="width: 100px;height:100px;line-height: 100px;">
									<Icon type="ios-camera" size="20" v-if="upload.carImgList.carImgList4 == ''"></Icon>
									<img :src="upload.carImgList.carImgList4" v-if="upload.carImgList.carImgList4" width="100px" height="100px">
								</div>
							</Upload>
							</FormItem>
							
						</Modal>
					</FormItem>

				</Form>
				</Col>
			</Row>

			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
				<Button type="primary" @click="edit" :loading='saveLoading'>保存 </Button>
			</div>
		</Modal>

	</div>
</template>
<script>
	import {
		getInfo,
		editCar,
		getData,
		getBrandType
	} from '@/api/car'

	//import Editor from '_c/editor'
	//import Upload from '_c/common/upload'
	export default {
		components: {
			//  Editor,
			//  Upload
		},
		props: {
			modalId: {
				type: Number,
				default: 0
			}
		},
		created() {
			let t = this;
			let baseUrl = process.env.NODE_ENV === 'development' ? t.$config.baseUrl.dev : t.$config.baseUrl.pro
			t.upload.url = baseUrl+'api/v1.common.cuser.upload/common_image';
			if(this.modalId > 0) {
				this.getInfoById()
			}
			t.getSearchDataExcute();
			t.getBrandTypeExcute();
		},
		data() {
			let t = this;
			return {
				modalShow: true,
				saveLoading: false,
				brandSysType: [],
				brandSysTypeData: [],
				applyStatus:'',
				upload:{
					url:'',
					//车辆照片
					carImgList:{
						carImgList1:'',
						carImgList2:'',
						carImgList3:'',
						carImgList4:'',
						handleSuccess1 (res, file) {
							if(res.code == 1){
								t.upload.carImgList.carImgList1 = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
            			handleSuccess2 (res, file) {
							if(res.code == 1){
								t.upload.carImgList.carImgList2 = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
            			handleSuccess3 (res, file) {
							if(res.code == 1){
								t.upload.carImgList.carImgList3 = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
            			handleSuccess4 (res, file) {
							if(res.code == 1){
								t.upload.carImgList.carImgList4 = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
            			
					},
					dImg:{
						handleSuccess1 (res, file) {
							if(res.code == 1){
								t.formData.drive_z_img = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
            			handleSuccess2 (res, file) {
							if(res.code == 1){
								t.formData.drive_f_img = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			},
					},
					cImg:{
						handleSuccess (res, file) {
							if(res.code == 1){
								t.formData.car_img = res.data.files;
							}else{
								this.$Notice.error({
										title: res.msg
									})
							}
            			}
					}
				},
				modal: {
					carImgM1: false,
					carImgM2: false,
					carImgM3: false,
				},
				getSearchData: {
					car_class: [],
					dot: [],
					car_oil: [],
					car_out: [],
					car_gear: [],
					limit_run: []
				},
				formData: {
					car_id:'',
					car_sn: '',
					car_brand_id: '',
					car_sys_id: '',
					car_type_id: '',
					car_class: '',
					dot_id: '',
					car_oil: '',
					car_out: '',
					car_gear: '',
					vin_sn: '',
					engine_sn: '',
					drive_z_img: '',
					drive_f_img: '',
					car_img: '',
					car_race: 1,
					d_price: '',
					h_price: '',
					b_price: '',
					h_dot_id: '',
					car_img_list:'',
					limit_run: '',
					set_no_ded: '',
					is_dri: '',
					dri_d_price: '',
					dri_h_price: '',
					gps_sn:''
				},
			}
		},
		methods: {
			getInfoById() {
				let t = this
				getInfo(t.modalId).then(res => {
					//console.log(res);
					if(res.data.code == 1){
						let res_data = res.data.data;
					    t.formData =  {
					    	car_id:res_data.car_id,
							car_sn: res_data.car_sn,
							car_brand_id: res_data.car_brand_id,
							car_sys_id: res_data.car_sys_id,
							car_type_id: res_data.car_type_id,
							car_class: res_data.car_class.toString(),
							dot_id: res_data.dot_id.toString(),
							car_oil: res_data.car_oil.toString(),
							car_out: res_data.car_out.toString(),
							car_gear: res_data.car_gear.toString(),
							vin_sn: res_data.vin_sn,
							engine_sn: res_data.engine_sn,
							drive_z_img: res_data.drive_z_img,
							drive_f_img: res_data.drive_f_img,
							car_img: res_data.car_img,
							car_race: 1,
							d_price: res_data.d_price,
							h_price: res_data.h_price,
							b_price: res_data.b_price,
							h_dot_id:[],
							car_img_list:res_data.car_img_list,
							limit_run: res_data.limit_run.toString(),
							set_no_ded: res_data.set_no_ded,
							is_dri: res_data.is_dri,
							dri_d_price: res_data.dri_d_price,
							dri_h_price: res_data.dri_h_price,
							gps_sn:res_data.gps_sn
						}
					    
					    res_data.car_return_dot.forEach((item,key)=>{
					    	t.formData.h_dot_id.push(item.dot_id.toString());
					    })
					    
					    
					    t.upload.carImgList.carImgList1 = res_data.car_img_list[0];
					    t.upload.carImgList.carImgList2 = res_data.car_img_list[1];
					    t.upload.carImgList.carImgList3 = res_data.car_img_list[2];
					    t.upload.carImgList.carImgList4 = res_data.car_img_list[3];
					    
					    t.brandSysType=[res_data.car_brand_id,res_data.car_sys_id,res_data.car_type_id];
					    
					    t.applyStatus = res.data.apply_status;
					    
					    //console.log(t.formData);
					
					}else{
						t.$Notice.error({
							title: res.data.msg
						})
						this.$emit('on-edit-modal-hide')
						this.modalShow = false
					}
					
				})

			},
			getSearchDataExcute() {
				let t = this;
				getData().then(res => {
					t.getSearchData.car_class = res.data.data.car_class;
					t.getSearchData.dot = res.data.data.dot;
					t.getSearchData.car_oil = res.data.data.car_oil;
					t.getSearchData.car_out = res.data.data.car_out;
					t.getSearchData.car_gear = res.data.data.car_gear;
					t.getSearchData.limit_run = res.data.data.limit_run;
//					console.log(t.getSearchData);
				}, function(error) {})
			},
			getBrandTypeExcute() {
				let t = this;
				getBrandType().then(res => {
					let list = res.data.data.list;

					//重组数据
					list.forEach((item, key) => {
						list[key].label = item.car_brand_name;
						list[key].value = item.car_brand_id;
						item.car_sys.forEach((v1, k1) => {
							list[key].car_sys[k1].label = v1.car_sys_name;
							list[key].car_sys[k1].value = v1.car_sys_id;
							list[key].children = list[key].car_sys;
							v1.car_type.forEach((v, k) => {
								list[key].car_sys[k1].car_type[k].label = v.car_type_name;
								list[key].car_sys[k1].car_type[k].value = v.car_type_id;
								list[key].children[k1].children = list[key].car_sys[k1].car_type;
							})
						})
					})
					t.brandSysTypeData = list;
				}, function(error) {})
			},
			loadData(item, callback) {
				//console.log('123');
				item.loading = true;

			},
			edit() {
				let t = this
				t.$refs.formData.validate((valid) => {
					if(valid) {
						t.saveLoading = true

						t.formData.car_brand_id = t.brandSysType[0];
						t.formData.car_sys_id = t.brandSysType[1];
						t.formData.car_type_id = t.brandSysType[2];
						//转字符串
						t.formData.h_dot_id = t.formData.h_dot_id.toString();
						
						t.formData.car_img_list = t.upload.carImgList.carImgList1+','+t.upload.carImgList.carImgList2+','+t.upload.carImgList.carImgList3+','+t.upload.carImgList.carImgList4;
						
						//console.log(JSON.stringify(t.formData));
//						return;
						//console.log(t.formData);
//						return;
						editCar(t.formData).then(res => {
							if(res.data.code == 1) {
								t.saveLoading = false
								t.modalShow = false
								t.$emit('on-edit-modal-success')
            					t.$emit('on-edit-modal-hide')
								t.$Notice.success({
									title: res.data.msg
								})
							} else {
								t.saveLoading = false
								t.$Notice.error({
									title: res.data.msg
								})
							}

						}, function(error) {
							t.saveLoading = false
						})
					}
				})
			},
			driChange(status){
				this.formData.dri_d_price = '';
				this.formData.dri_h_price = '';
			},
			cancel() {
				this.$emit('on-edit-modal-hide')
				this.modalShow = false
			},
			//车辆照片
			modelCarOk1() {
			    this.formData.car_img_list = this.upload.carImgList.carImgList1+','+this.upload.carImgList.carImgList2+','+this.upload.carImgList.carImgList3+','+this.upload.carImgList.carImgList4
			    //console.log(this.formData.car_img_list);
			},
			modelCarC1() {
                
			},
			//车辆行驶证
			modelCarOk2() {

			},
			modelCarC2() {

			},
			//人车合照
			modelCarOk3() {

			},
			modelCarC3() {

			}

		},

	}
</script>